<template>
  <div class="base-info">
    <el-card class="count">
      <div style="margin-bottom: 20px">
        <el-button
          type="warning"
          plain
          class="header"
          size="small"
          @click="$router.back()"
        ><i class="el-icon-back" /> 返回</el-button>
        <el-tag type="warning" class="header">店铺基本信息</el-tag>
      </div>
      <el-row type="flex">
        <!-- 左侧基本信息 -->
        <el-col>
          <el-form ref="baseInfoForm" :model="baseInfo" label-width="120px">
            <el-form-item label="店铺ID">
              <el-input v-model="baseInfo.storeNum" />
            </el-form-item>
            <el-form-item label="店铺名称">
              <el-input v-model="baseInfo.storeName" />
            </el-form-item>
            <el-form-item label="分店名称">
              <el-input v-model="baseInfo.subStoreName" />
            </el-form-item>
            <el-form-item label="所属行业">
              <el-select
                v-model="baseInfo.storeIndustryErinId"
                placeholder="请选择"
                @focus="getIndustry"
              >
                <el-option
                  v-for="item in industrys"
                  :key="item.id"
                  :label="item.industryname"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="baseInfoDetail.IDcard" />
            </el-form-item>
            <el-form-item label="身份证正面照">
              <!-- <el-image
                class="img"
                :src="baseInfoDetail.IDcardImageBefore"
                fit="cover"
              /> -->
              <!-- 放置上传图片 -->
              <image-upload ref="imageUpload" />
            </el-form-item>
            <el-form-item label="身份证反面照">
              <el-image
                class="img"
                :src="baseInfoDetail.IDcardImageAfter"
                fit="cover"
              />
            </el-form-item>
            <el-form-item label="店铺地址">
              <div id="map-container" style="width:100%;height:500px;" />

              <el-input v-model="baseInfo.storeAddress" />
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 右侧基本信息 -->
        <el-col>
          <el-form label-width="120px">
            <el-form-item label="店铺头像">
              <el-image
                class="img"
                :src="baseInfoDetail.storeAvatar"
                fit="cover"
              />
            </el-form-item>
            <el-form-item label="主要产品图">
              <!-- <el-input v-model="baseInfoDetail.mainProdsImgs" /> -->
              <el-image
                v-for="(item, index) in baseInfoDetail.mainProdsImgs"
                :key="index"
                class="img"
                :src="item"
                fit="cover"
              />
            </el-form-item>
            <el-form-item label="店铺实拍图">
              <el-image
                v-for="(item, index) in baseInfoDetail.storeImags"
                :key="index"
                class="img"
                :src="item"
                fit="cover"
              />
            </el-form-item>
            <el-form-item label="营业证件照">
              <el-image
                v-for="(item, index) in baseInfoDetail.businessLicenseImgs"
                :key="index"
                class="img"
                :src="item"
                fit="cover"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row type="flex" slot:footer justify="center">
        <el-col :span="6">
          <el-button size="small" type="" @click="resetBtn">重置</el-button>
          <el-button
            size="small"
            type="primary"
            @click="updateBtn"
          >保存</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  getStoreById,
  getStoreDetailsById,
  updateStoreBaseInfo,
  updateStoreDetails,
  getIndustry
} from '@/api/storeserin'
import { storeIndustryErins } from '@/filters/storeerin'
import storeEnum from '@/api/constant/storeerin'
import loadBMap from '@/utils/loadBMap'

export default {
  name: 'BaseInfo',
  components: {},
  props: {
    storeId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data() {
    return {
      baseInfo: {}, // 表单的信息左
      baseInfoDetail: {}, // 表单的信息右
      industrys: [],
      form: {
        address: '', // 详细地址
        addrPoint: {
          // 详细地址经纬度
          lng: 0,
          lat: 0
        }
      },
      map: '', // 地图实例
      mk: '' // Marker实例
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getBaseInfo()
  },
  async mounted() {
    await loadBMap('XOGNyENuwIo7BPitNCwPeRvFxHmbKq5q') // 加载引入BMap
    this.initMap()
  },
  methods: {
    async getBaseInfo() {
      const res1 = await getStoreById(this.storeId)
      const res2 = await getStoreDetailsById(this.storeId)
      // 处理行业数据
      const industryName = storeIndustryErins(res1[0].storeIndustryErinId)
      this.baseInfo = { ...res1[0], storeIndustryErinId: industryName }
      this.baseInfoDetail = res2[0]
      // 判断一下是否有staffPtoto  ==> 严谨
      if (this.baseInfoDetail.IDcardImageBefore) {
        // 将头像给到fileList
        this.$refs.imageUpload.fileList = [
          {
            url: this.baseInfoDetail.IDcardImageBefore,
            upload: true
          }
        ]
      }
    },
    // 获取行业信息
    async getIndustry() {
      this.industrys = await getIndustry()
    },
    resetBtn() {
      this.getBaseInfo()
    },
    async updateBtn() {
      try {
        // 头像更新后， 提交保存, 判断头像是否上传完成，根据upload属性
        const fileList = this.$refs.imageUpload.fileList
        console.log(fileList)
        if (fileList.some(item => !item.upload)) {
          this.$message.warning('头像还未上传完成')
          return false
        }
        await this.$confirm('确定要保存吗？')
        // 处理传进来的行业是中文的问题
        if (typeof this.baseInfo.storeIndustryErinId === 'string') {
          const matchData = storeEnum.storeIndustryErins.find(
            item => item.industryname === this.baseInfo.storeIndustryErinId
          )
          this.baseInfo.storeIndustryErinId = matchData.id
          // 将中文装成对应的数字
        }
        // 有头像
        await updateStoreDetails({
          ...this.baseInfoDetail,
          IDcardImageBefore: fileList && fileList.length ? fileList[0].url : ''
        }) // 这里的空字符串一定要是又一个空格
        this.$message.success('更新员工信息成功')
        await updateStoreBaseInfo(this.baseInfo)
        this.resetBtn()
      } catch (error) {
        //
      }
    },
    // 初始化地图
    initMap() {
      var that = this
      this.map = new BMap.Map('map-container', { enableMapClick: false }) // 新建地图实例，enableMapClick:false ：禁用地图默认点击弹框
      var point = new BMap.Point(113.30765, 23.12005)
      this.map.centerAndZoom(point, 19)
    }
  }
}
</script>

<style scoped lang="scss">
.count {
  .header {
    margin-right: 20px;
  }
}
.el-card {
  margin: 10px 20px 0;
  .el-input {
    width: 80%;
  }
}
.img {
  width: 57px;
  height: 57px;
  border-radius: 10px;
}
</style>
